<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<image :src="'/images/qbg_02.png' | formatImgUrl" class="bei" mode=""></image>
		<view class="dingbox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="neibox">
				<view class="title">
					签约入团<br>
					福利享不停！
				</view>
				<view class="lvbg">
					<scroll-view scroll-y="true" class="huabox">
						<view class="huatitle">
							签约入团
						</view>
						<view class="haobox">
							<view class="haotitle">
								团号
							</view>
							<view class="huanum">
								<input type="number" v-model="number" style="text-align: right;"
									placeholder-style="color:#eeeeee" placeholder="请输入团号" maxlength="8">
							</view>
						</view>
						<view class="shenbox" @click="submit(number)">
							立即申请
						</view>
						<view class="menbox">
							<view class="mentxt">
								热门推荐
							</view>
							<view class="menyou" @click="getList">
								<image :src="'/images/sx.png' | formatImgUrl" class="menpic" mode=""></image>
								<view class="mtxt">
									换一批
								</view>
							</view>
						</view>
						<view class="tuibox" v-for="item in list">
							<image :src="item.img | formatImgUrl" class="head" mode="aspectFill"></image>
							<view class="tuicen">
								<view class="erabox">
									<view class="ertitle oneline">
										{{item.number}}-{{item.name}}
									</view>
									<view class="qing" @click="submit(item.number)">
										查看
									</view>
								</view>

								<view class="ertxt oneline">
									简介：{{item.des}}
								</view>
								<view class="ertxt oneline">
									联系：{{item.tel}}
								</view>
								<view class="ertxt oneline">
									QQ：{{item.qq}}
								</view>
							</view>

						</view>
					</scroll-view>
				</view>
			</view>
			<view class="dibai" @click="goMyPage">
				<view class="jujue">
					拒绝签约入团，个人接单
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				number: '',
				list: []
			}
		},
		onLoad() {

		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		onShow() {
			this.getList()
		},
		methods: {
			submit(id) {
				this.$api.default.request('user/searchTeam', {
					num: id
				}, 'POST', false).then((res) => {
					if (res.code) {
						uni.navigateTo({
							url: '/pages/user/affirm?number=' + id
						}) 
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getList() {
				this.$api.default.request('user/teamList', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.list = res.data
					}
				})
			},
			goMyPage() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		position: relative;
		padding: 102rpx 0;

		.bei {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.dingbox {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;

			.neibox {
				padding: 0 75rpx;

				.title {
					font-size: 72rpx;
					font-weight: bold;
					letter-spacing: 0px;
					line-height: 104rpx;
					padding-bottom: 48rpx;
					color: #45C4B0;
				}

				.lvbg {
					border-top-left-radius: 30px;
					border-top-right-radius: 30px;
					height: 848rpx;
					padding-top: 28rpx;
					background: #45C4B0;
					box-shadow: 0px 4px 10px 0px #45C4B0, inset 0px 4px 10px 0px rgba(255, 255, 255, 0.3);

					.huabox {
						padding: 0 40rpx;
						width: 520rpx;
						height: 848rpx;

						.huatitle {
							padding-bottom: 26rpx;
							font-size: 36rpx;
							font-weight: bold;
							line-height: 40rpx;
							letter-spacing: 0px;
							color: #FFFFFF;
						}

						.haobox {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-bottom: 20rpx;
							border-bottom: 1px solid rgba(255, 255, 255, 0.1);

							.haotitle {
								font-size: 28rpx;
								font-weight: bold;
								line-height: 40rpx;
								letter-spacing: 0px;
								color: #FFFFFF;
							}

							.huanum {
								color: #FFFFFF;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}

						.shenbox {
							margin: 20rpx auto 40rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							border-radius: 8px;
							opacity: 1;
							background: #FFFFFF;
							font-size: 24rpx;
							color: #45C4B0;
						}

						.menbox {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-bottom: 20rpx;

							.mentxt {
								font-size: 36rpx;
								font-weight: bold;
								line-height: 40rpx;
								color: #FFFFFF;
							}

							.menyou {
								display: flex;
								align-items: center;
								justify-content: flex-end;

								.menpic {
									width: 20rpx;
									height: 20rpx;
								}

								.mtxt {
									font-size: 20rpx;
									text-align: right;
									color: #FFFFFF;
									padding-left: 5rpx;
								}
							}
						}

						.tuibox {
							display: flex;
							align-items: flex-start;
							justify-content: space-between;
							width: 100%;
							padding-bottom: 34rpx;

							.head {
								width: 138rpx;
								height: 138rpx;
								border-radius: 12px;
								flex-shrink: 0;
							}

							.tuicen {
								flex-grow: 1;
								padding: 0 0 0 12rpx;

								.erabox {
									display: flex;
									align-items: flex-start;
									justify-content: space-between;
									padding-bottom: 2rpx;

									.ertitle {
										width: 240rpx;
										font-size: 28rpx;
										font-weight: bold;
										letter-spacing: 0em;
										color: #FFFFFF;
										line-height: 40rpx;
									}

									.qing {
										width: 104rpx;
										height: 40rpx;
										line-height: 40rpx;
										border-radius: 4px;
										opacity: 1;
										background: #FFFFFF;
										font-size: 24rpx;
										font-weight: bold;
										text-align: center;
										color: #45C4B0;
										flex-shrink: 0;
									}
								}

								.ertxt {
									font-size: 20rpx;
									color: #FFFFFF;
									width: 285rpx;
									padding-bottom: 4rpx;
								}
							}

						}
					}
				}
			}

			.dibai {
				background-color: #FFFFFF;
				padding: 20rpx 60rpx;

				.addbox {
					height: 80rpx;
					border-radius: 8px;
					opacity: 1;
					margin-bottom: 20rpx;
					background: #45C4B0;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					letter-spacing: 0em;
					color: #FFFFFF;
				}

				.jujue {
					height: 80rpx;
					border-radius: 8px;
					opacity: 1;
					background: #3D3D3D;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					letter-spacing: 0em;
					color: #FFFFFF;
				}
			}
		}

	}
</style>